<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单详情填写</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<style>
    .div1 .form-control{
        float: left;
        margin-left: 7%;
        margin-top: 8px;
    }
    .div1{
        background-color: blue;
    }
    .null{
        margin-top: 45px;
    }
</style>
<div style="width: 50%;margin: auto;margin-top: 30px">
    <h3 style="margin-left: 20%">请填写正确的订单信息</h3>
</div>
<form class="form-horizontal" style="width: 50%;margin-left: 20%;margin-top: 50px" action="submitMessage" method="post">
    {{csrf_field()}}
    <input type="hidden" name="id" value="{{$data->id}}" class="form-control">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">卡卷号</label>
        <div class="col-sm-10">
            <input class="form-control" id="inputEmail3" type="text" name="account" value="{{$data->account}}">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">收货人</label>
        <div class="col-sm-10">
            <input type="text" name="name" placeholder="姓名" class="form-control" id="inputPassword3">
        </div>
    </div>
    {{--ssssssssss--}}
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
        <div class="col-sm-10">
            <input type="tel" name="tel" placeholder="手机号" class="form-control" id="inputPassword3">
        </div>
    </div>
    <div class="div1">
            <select name="province" style="width: 150px;" class="province form-control">
                <option>==请选择省==</option>
                @foreach($province as $item)
                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                @endforeach
            </select>
            <select name="city" id="fang_city" style="width: 150px;" class="city form-control">
                <option value="0">==市==</option>
            </select>
            <select name="area" id="fang_region" style="width: 150px;" class="area form-control">
                <option value="0">==区/县==</option>
            </select>
    </div>
    <br>
    <div class="null"></div>
    <div class="form-group address">
        <label for="inputPassword3" class="col-sm-2 control-label">详细地址</label>
        <div class="col-sm-10">
            <input type="text" name="address" placeholder="填写详细地址" class="form-control" id="inputPassword3">
        </div>
    </div>
    <div class="form-group" style="margin-left: 19%;">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" style="margin-top: 20px;width: 200px;text-align: center;">下&nbsp;&nbsp;&nbsp;&nbsp;单</button>
        </div>
    </div>
</form>
</body>
</html>
<script type="application/javascript">
    $(function () {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.province').change(function () {
            var province = $(this).val();

            $.ajax({
                //请求方式
                type : "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "getcity",
                //数据，json字符串
                data : {"province":province},
                //请求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var citys = result.data;

                        var optionstr = "";
                        //渲染city选择框
                        for(var i = 0; i < citys.length; i++)
                        {
                            var city = citys[i];

                            optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
                        }

                        $('.city').html(optionstr);

                    }
                    else
                    {
                        alert(result.message);
                    }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })
    $(function () {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.city').change(function () {
            var city = $(this).val();
            console.log(city);
            $.ajax({
                //请求方式
                type : "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "getarea",
                //数据，json字符串
                data : {"city":city},
                //请求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var areas = result.data;
                        console.log(areas);
                        var optionstr = "";
                        //渲染city选择框
                        for(var i = 0; i < areas.length; i++)
                        {
                            var area = areas[i];

                            optionstr += "<option value='" + area.id + "'>" + area.name + "</option>";
                        }

                        $('.area').html(optionstr);

                    }
                    else
                    {
                        alert(result.message);
                    }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })

</script>

